<template>
	<view class="content">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"></uni-segmented-control>
		<view class="con">
			<view class="unit" v-show="current === 0"><geren></geren></view>
			<view class="personal" v-show="current === 1"><danwei></danwei></view>
		</view>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import danwei from './danwei.vue';
import geren from './geren.vue';
export default {
	data() {
		return {
			items: [
				{
					title: '个人养犬办牌',
					src: '../../static/img/geren2.png'
				},
				{
					title: '单位养犬办牌',
					src: '../../static/img/danwei.png'
				}
			],
			current: 0 //选项卡 选中
		};
	},
	methods: {
		onClickItem(index) {
			if (this.current !== index) {
				this.current = index;
			}
		}
	},
	components: {
		uniSegmentedControl,
		danwei,
		geren
	}
};
</script>

<style lang="scss">
.content {
	.con {
		font-size: 26upx;
		// .unit {
		padding: 20upx;

		.title {
			text-align: center;
			font-size: 28upx;
			font-weight: 700;
			margin-bottom: 20upx;
			padding-top: 50upx;
		}

		input {
			color: $chong-text-color;
			font-size: 24upx;
			margin: 10upx 0;
			padding: 4upx 20upx;

			border: {
				radius: 10upx;
				style: solid;
				width: 1upx;
				color: rgba($chong-text-color, 0.2);
			}

			background: white;
		}

		radio-group {
			padding: 20upx 0;

			label {
				.uni-radio-input-checked {
					background-color: $chong-iconbg-color !important;
				}

				padding: 0 10upx;
			}
		}

		/* 上传 */
		.uni-uploader {
			flex: 1;
			flex-direction: column;
			width: 100%;
		}

		.uni-uploader-info {
			color: #b2b2b2;
		}

		.uni-uploader-body {
			margin-top: 16upx;
		}

		.uni-uploader__files {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.uni-uploader__file {
			width: 208upx;
			height: 208upx;
			margin: 10px auto;
		}

		.uni-uploader__img {
			display: block;
			width: 208upx;
			height: 208upx;
		}

		.uni-uploader__input-box {
			position: relative;
			margin: 10upx auto;
			width: 208upx;
			height: 208upx;
			border: 2upx solid #d9d9d9;
		}

		.uni-uploader__input-box:before,
		.uni-uploader__input-box:after {
			content: ' ';
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background-color: #d9d9d9;
		}

		.uni-uploader__input-box:before {
			width: 4upx;
			height: 79upx;
		}

		.uni-uploader__input-box:after {
			width: 79upx;
			height: 4upx;
		}

		.uni-uploader__input-box:active {
			border-color: #999999;
		}

		.uni-uploader__input-box:active:before,
		.uni-uploader__input-box:active:after {
			background-color: #999999;
		}

		.uni-uploader__input {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}

		.uni-uploader__file,
		.uni-uploader__input-box {
			width: 50%;
		}

		.close-view {
			text-align: center;
			line-height: 14px;
			height: 16px;
			width: 16px;
			border-radius: 50%;
			background: #ff5053;
			color: #ffffff;
			position: absolute;
			top: -6px;
			right: -4px;
			font-size: 12px;
		}

		.picBox > view {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		// }
		// 		.personal {
		// 		}
	}

	.wenzi {
		margin: 40upx 0;
		line-height: 40upx;
		font-size: 16upx;
		text-align: center;
		color: #888888;
	}

	.btn {
		padding: 50upx 0;
		margin: 0 140upx;
	}
}

.huang {
	color: $chong-iconbg-color;
}
</style>
